<template>
  <view class="contactuser" :style="'height:' + windowHeight">
    <!-- <theHeader :username="realname" />
    <view class="search">
      <image src="../../static/image/contactuser/search.png" mode="" />
      <input type="text" v-model="searchtext" placeholder="搜索关键词" />
    </view>
    <view class="sub_title">组织单位</view>
    <view class="list">
      <view class="item" v-for="item1 in list" :key="item1.name">
        <view class="item1" @tap="item1.show = !item1.show">
          <view>{{ item1.name }}</view>
          <view>
            <text>{{ item1.number }}</text>
            <image
              :src="
                item1.show == false
                  ? '../../static/image/contactuser/select.png'
                  : '../../static/image/contactuser/select_active.png'
              "
              mode=""
            />
          </view>
        </view>
        <view
          v-for="item2 in item1.children"
          :key="item2.name"
          v-show="item1.show"
          ><view class="item2" @tap="item2.show = !item2.show">
            <view>{{ item2.name }}</view>
            <view
              ><text>{{ item2.number }}</text
              ><image src="../../static/image/contactuser/select.png" mode="" />
            </view>
            <view class="item2_icon"></view>
          </view>
          <view
            class="item3"
            v-for="(item3, index) in item2.children"
            :key="index"
            v-show="item2.show"
            @tap="openUser()"
            >{{ item3.name }}</view
          >
        </view>
      </view>
    </view> -->
    <view>功能暂未开放</view>
  </view>
</template>

<script>
import theHeader from "../../components/header/header";
export default {
  data() {
    return {
      realname: "",
      windowHeight: "",
      searchtext: "",
      list: [
        {
          name: "永泰县委办公室",
          number: 5,
          show: false,
          children: [
            {
              name: "县委督查",
              number: "5",
              show: false,
              children: [
                {
                  name: "xxx",
                },
                {
                  name: "xxx",
                },
                {
                  name: "xxx",
                },
                {
                  name: "xxx",
                },
                {
                  name: "xxx",
                },
              ],
            },
          ],
        },
        {
          name: "永泰县攻坚室",
          number: 5,
          show: false,
          children: [
            {
              name: "部门",
              number: "5",
              show: false,
              children: [
                {
                  name: "xxx",
                },
                {
                  name: "xxx",
                },
                {
                  name: "xxx",
                },
                {
                  name: "xxx",
                },
                {
                  name: "xxx",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  components: {
    theHeader,
  },
  onLoad() {
    var _this = this;
    _this.realname = uni.getStorageSync("realname");
    uni.getSystemInfo({
      success: function (res) {
        _this.windowHeight = res.windowHeight;
      },
    });
  },
  methods: {
    openUser() {
      uni.navigateTo({
        url: "/pages/contactuser/user/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.contactuser {
  background-color: #f6f7fa;
  min-height: 1500rpx;
  .search {
    height: 56rpx;
    margin-top: -130rpx;
    position: relative;
    image {
      width: 32rpx;
      height: 32rpx;
      position: absolute;
      left: 40rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    input {
      display: block;
      width: 650rpx;
      height: 56rpx;
      margin: 0 auto;
      background: #ffffff;
      border-radius: 8px;
      padding-left: 55rpx;
    }
  }
  .sub_title {
    margin-left: 20rpx;
    margin-top: 100rpx;
  }
  .list {
    width: 100%;
  }
  .item1 {
    height: 100rpx;
    line-height: 100rpx;
    background: #ffffff;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8rpx;
    padding: 0 20rpx;

    view:nth-child(1) {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #585f6b;
    }
    view:nth-child(2) {
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #8e9cb3;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;

      image {
        width: 16rpx;
        height: 8rpx;
        margin-left: 16rpx;
      }
    }
  }
  .item2 {
    height: 80rpx;
    line-height: 80rpx;
    background: #ffffff;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8rpx;
    padding-left: 76rpx;
    padding-right: 20rpx;
    position: relative;

    view:nth-child(1) {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #585f6b;
    }
    view:nth-child(2) {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #8e9cb3;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      image {
        width: 16rpx;
        height: 8rpx;
        margin-left: 16rpx;
        transform: rotate(-90deg);
      }
    }
    .item2_icon {
      width: 8rpx;
      height: 8rpx;
      background: #3074ff;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 60rpx;
      transform: translateY(-50%);
    }
  }
  .item3 {
    height: 64rpx;
    line-height: 64rpx;
    background: #ffffff;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8rpx;
    padding-left: 76rpx;
    padding-right: 20rpx;
    position: relative;

    view:nth-child(1) {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #585f6b;
    }
    view:nth-child(2) {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #8e9cb3;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      image {
        width: 16rpx;
        height: 8rpx;
        margin-left: 16rpx;
        transform: rotate(-90deg);
      }
    }
    .item2_icon {
      width: 8rpx;
      height: 8rpx;
      background: #3074ff;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 60rpx;
      transform: translateY(-50%);
    }
  }
}
</style>
